<template>
  <div id="DataMaintenance-childChange">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{$t('gradenSet.gradenSet.childChange.50zgdqy90sw0')}}</span>
      </div>
      <div class="cr-head-right">
        <el-button type="primary" size="mini" @click="handAdd">{{$t('gradenSet.gradenSet.childChange.50zgdqy92b40')}}</el-button>
      </div>
    </div>
    <div class="pAll12 bt_EBEEF5">
      <div class="flex-wrap">
        <div class="flex-al mb12">
          <!-- <span class="mr10 fs14 color-666">{{$t('gradenSet.gradenSet.childChange.50zgdqy92n00')}}</span> -->
          <div class="select-box" style="width:170px;">
            <el-select
              v-model="filter.stuchange_code"
              clearable
              filterable
              :placeholder="$t('gradenSet.gradenSet.childChange.50zgdqy92y00')"
              @change="search"
              @clear="search"
            >
              <el-option
                v-for="item in filter.postpartList"
                :key="item.stuchange_id"
                :label="item.stuchange_name"
                :value="item.stuchange_code"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="lines ml16 mr16 mb12"></div>
        <div class="flex-al Inquire-box mb12">
          <div class="ipt-box" style="width:250px;">
            <el-input
              v-model="filter.keyword"
              clearable
              :placeholder="$t('gradenSet.gradenSet.childChange.50zgdqy93900')"
              @clear="search"
              @keyup.enter.native="search"
            ></el-input>
          </div>
          <el-button type="primary" size="mini" class="search-btn fs14" @click="search">{{$t('gradenSet.gradenSet.childChange.50zgdqy93kk0')}}</el-button>
        </div>
      </div>
      <div class="tableDiv" ref="auto_height_table">
        <settingTableCont :tableData="tableList">
          <!-- 按钮操作组********start -->
          <el-table-column ref="fixedColumn" :label="$t('gradenSet.gradenSet.childChange.50zgdqy93vc0')" align="center" width="120px" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click.native.prevent="handEdit(scope.row)">{{$t('gradenSet.gradenSet.childChange.50zgdqy94640')}}</el-button>
              <el-button type="text" size="small" @click.native.prevent="handDelete(scope.row)">{{$t('gradenSet.gradenSet.childChange.50zgdqy94ik0')}}</el-button>
            </template>
          </el-table-column>
          <!-- 按钮操作组********end -->
        </settingTableCont>
        <!-- 分页 -->
        <el-pagination
          style="margin: 10px;"
          :current-page.sync="paging.curPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="paging.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.pageTotal"
          @current-change="curPageChange"
          @size-change="pageSizeChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 侧边弹窗******新增或者编辑学生异动原因 -->
    <el-drawer
      :title="isEdit? $t('gradenSet.gradenSet.childChange.add1') : $t('gradenSet.gradenSet.childChange.add2')"
      :visible.sync="cancelVisible"
      direction="rtl"
      size="500px"
      :modal="false"
      custom-class="pop-slider--box"
      :before-close="handleClose"
    >
      <div class="slider-btn">
        <el-button v-if="!isEdit" type="primary" size="mini" @click="onSubmit">{{$t('gradenSet.gradenSet.childChange.50zgdqy94vc0')}}</el-button>
        <el-button v-else type="primary" size="mini" @click="onEditSubmit">{{$t('gradenSet.gradenSet.childChange.50zgdqy94vc0')}}</el-button>
      </div>
      <div class="slider-content pAll20">
        <el-form label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item :label="$t('gradenSet.gradenSet.childChange.50zgdqy92n00')" prop="stuchange_code">
            <el-select
              v-model="ruleForm.stuchange_code"
              clearable
              filterable
              :placeholder="$t('gradenSet.gradenSet.childChange.50zgdqy95600')"
              style="width:320px;"
            >
              <el-option
                v-for="item in filter.postpartList"
                :key="item.stuchange_id"
                :label="item.stuchange_name"
                :value="item.stuchange_code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('gradenSet.gradenSet.childChange.50zgdqy95ho0')" prop="reason_code">
            <el-input
              clearable
              v-model="ruleForm.reason_code"
              :placeholder="$t('gradenSet.gradenSet.childChange.50zgdqy95rs0')"
              style="width:320px;"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('gradenSet.gradenSet.childChange.50zgdqy93900')" prop="reason_note">
            <el-input
              type="textarea"
              clearable
              v-model="ruleForm.reason_note"
              autosize
              :placeholder="$t('gradenSet.gradenSet.childChange.50zgdqy96500')"
              style="width:320px;"
            ></el-input>
          </el-form-item>
        </el-form>
        <p class="color-red">* {{$t('gradenSet.gradenSet.childChange.50zgdqy96fs0')}}</p>
      </div>
    </el-drawer>
    <!-- 删除异动原因 -->
    <popTips
      :dialogVisable="delItem"
      :popTipsCont="popTips_del"
      @handConfirm="delStuchangeReasonAction"
      @handCancel="delItem=false"
      @handleCloseTip="delItem=false"
    ></popTips>
  </div>
</template>

<script>
import settingTableCont from "@/components/tables/settingTableCont.vue";
import popTips from "@/components/common/popTips/popTips.vue";
import setHttp from "../../Set";

export default {
  name: "setting",
  components: {
    settingTableCont,
    popTips
  },
  data() {
    var isCorrentNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t('gradenSet.gradenSet.childChange.50zgdqy95rs0')));
      } else if (!/^[0-9]*$/.test(value)) {
        callback(new Error(this.$t('gradenSet.gradenSet.childChange.50zgdqy96q80')));
      } else {
        callback();
      }
    };
    var isCorrentReason = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t('gradenSet.gradenSet.childChange.50zgdqy96500')));
      } else if (/^[0-9]*$/.test(value)) {
        callback(new Error(this.$t('gradenSet.gradenSet.childChange.50zgdqy972o0')));
      } else {
        callback();
      }
    };
    return {
      delItem: false, //删除学生异动原因
      cancelVisible: false, //新增或者编辑职务
      isEdit: false, //是否编辑职务
      reasonId: "",
      //删除学生异动原因****弹窗
      popTips_del: {
        btn_text1: this.$t('gradenSet.gradenSet.childChange.50zgdqy97dg0'),
        btn_text2: this.$t('gradenSet.gradenSet.childChange.50zgdqy97no0'),
        title: this.$t('gradenSet.gradenSet.childChange.50zgdqy97yo0'),
        context: this.$t('gradenSet.gradenSet.childChange.50zgdqy98cw0')
      },
      //检索-table
      filter: { postpartList: "", stuchange_code: "", keyword: "" },
      // 表格数据
      tableList: {
        // 表格的列
        columns: [],
        // 表格数据
        list: [],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: 0
        }
      },
      // 分页
      paging: {
        curPage: 1,
        pageSize: 10,
        pageTotal: 0
      },
      // 表单
      ruleForm: {
        stuchange_code: "",
        reason_code: "",
        reason_note: ""
      },
      // 表单验证
      rules: {
        stuchange_code: [
          {
            required: true,
            message: this.$t('gradenSet.gradenSet.childChange.50zgdqy98mo0'),
            trigger: "change"
          }
        ],
        reason_code: [
          {
            required: true,
            validator: isCorrentNumber,
            trigger: "blur"
          }
        ],
        reason_note: [
          {
            required: true,
            validator: isCorrentReason,
            trigger: "blur"
          }
        ]
      }
    };
  },
  created() {
    this.getStuchangeApi(); // 通用->获取校园角色下拉列表
    this.getStuchangeReasonList();
  },
  methods: {
    //园务相关设置 列表
    getStuchangeReasonList() {
      setHttp
        .getStuchangeReasonList({
          is_count: "1", //是否需要总数，可以不传
          p: this.paging.curPage,
          num: this.paging.pageSize,
          //筛选条件
          stuchange_code: this.filter.stuchange_code,
          keyword: this.filter.keyword
        })
        .then(res => {
          this.paging.pageTotal = parseInt(res.data.result.allnum);
          this.tableList.columns = res.data.result.field;
          if (res.data.error == 0) {
            this.tableList.list = res.data.result.list;
          } else {
            this.tableList.list = [];
            this.tableList.options.errortip = res.data.errortip;
          }
        });
    },
    //检索
    search() {
      this.paging.curPage = 1;
      this.getStuchangeReasonList();
    },
    //新增
    handAdd() {
      this.isEdit = false; //是否编辑
      this.cancelVisible = !this.cancelVisible;
      this.resetForm("ruleForm");
    },
    //编辑
    handEdit(v) {
      this.reasonId = v.reason_id;
      this.resetForm("ruleForm");
      this.ruleForm = {
        stuchange_code: v.stuchange_code,
        reason_code: v.reason_code,
        reason_note: v.reason_note
      };
      this.isEdit = true;
      this.cancelVisible = !this.cancelVisible;
    },
    //删除
    handDelete(v) {
      this.reasonId = v.reason_id;
      this.delItem = !this.delItem;
    },
    //删除异动原因
    delStuchangeReasonAction() {
      setHttp
        .delStuchangeReasonAction({
          reason_id: this.reasonId
        })
        .then(res => {
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.delItem = false;
            this.getStuchangeReasonList();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    //侧边弹窗 - 新增 - 提交
    onSubmit() {
      let canSubmit = this.$Tool.isNull("ruleForm", this);
      console.log(canSubmit);
      if (canSubmit) {
        setHttp
          .addStuchangeReasonAction({
            stuchange_code: this.ruleForm.stuchange_code,
            reason_code: this.ruleForm.reason_code,
            reason_note: this.ruleForm.reason_note
          })
          .then(res => {
            if (res.data.error == 0) {
              this.$message({ message: res.data.errortip, type: "success" });
              this.cancelVisible = false;
              this.getStuchangeReasonList();
            } else {
              this.$message.error(res.data.errortip);
            }
          });
      } else {
        return false;
      }
    },
    //侧边弹窗 - 编辑 - 提交
    onEditSubmit() {
      let canSubmit = this.$Tool.isNull("ruleForm", this);
      if (canSubmit) {
        setHttp
          .updateStuchangeReasonAction({
            reason_id: this.reasonId,
            stuchange_code: this.ruleForm.stuchange_code,
            reason_code: this.ruleForm.reason_code,
            reason_note: this.ruleForm.reason_note
          })
          .then(res => {
            if (res.data.error == 0) {
              this.$message({ message: res.data.errortip, type: "success" });
              this.cancelVisible = false;
              this.getStuchangeReasonList();
            } else {
              this.$message.error(res.data.errortip);
            }
          });
      }
    },
    // 通用->获取校园角色下拉列表
    getStuchangeApi() {
      this.$http.getStuchangeApi({}).then(res => {
        if (res.data.error == 0) {
          console.log(res.data);
          this.filter.postpartList = res.data.result.list;
        } else {
          this.filter.postpartList = [];
        }
      });
    },

    // 页码变化
    curPageChange(v) {
      this.paging.curPage = v;
      this.getStuchangeReasonList();
    },
    // pageSize改变
    pageSizeChange() {
      this.paging.curPage = 1;
      this.getStuchangeReasonList();
    },
    // 重置表单
    resetForm(form) {
      // 数据清空
      this.ruleForm = {
        stuchange_code: "",
        reason_code: "",
        reason_note: ""
      };
      if (this.$refs[form]) {
        this.$refs[form].resetFields();
      }
    },
    //侧边弹窗-关闭
    handleClose(done) {
      done();
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 55
        );
      }
    });
  }
};
</script>

<style lang="less">
// #DataMaintenance-childChange {
// }
</style>
